<template>
  <div>
    <h5 class="text-muted">当前任务：任务分配</h5>
    <el-form class="query-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          :clearable="true"
          placeholder="企业名称查询"
          @change="getData"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox
          v-model="params.has_ele_fee"
          v-if="!showImportBtn"
          border
          :true-label="1"
          false-label=""
          @change="getData"
        >
          有电表
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()" v-show="!showImportBtn">查询</el-button>
        <el-button @click="getOneIndustry" v-show="showImportBtn">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right" style="margin-right: 50px" v-if="1">
        <el-badge :value="oneIndustryTotalCount" type="primary" class="item">
          <el-button class="btn-long" @click="getOneIndustryView" v-loading="loading">
            十二大产业贷
          </el-button>
        </el-badge>
      </el-form-item>
    </el-form>
    <loading-wrap>
      <el-table border :data="tableData" v-show="!showImportBtn">
        <el-table-column prop="customer_name" label="企业名称" min-width="180"></el-table-column>
        <el-table-column prop="address" label="地址" min-width="140">
          <template slot-scope="scope">
            <span class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="org_class_name" label="组织形式" min-width="110"></el-table-column>
        <el-table-column label="企业类型">
          <template slot-scope="scope">
            {{ enumFarmType[scope.row.farm_type] }}
          </template>
        </el-table-column>

        <el-table-column prop="corp_name" label="法人"></el-table-column>
        <el-table-column prop="mobile_no" label="联系电话" min-width="100"></el-table-column>
        <el-table-column label="产品名字" align="center" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.load_type }}-{{ scope.row.load_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请金额(万元)">
          <template slot-scope="scope">
            <span>{{ scope.row.apply_funds }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预审金额(万元)">
          <template slot-scope="scope">
            <span>{{ scope.row.approved_funds }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="apply_funds" label="任务状态" align="center">
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.distType">{{ scope.row.taskStatus }}</el-tag>
            <!--<span v-if="!scope.row.res_a">{{enumTaskStatus[scope.row.task_status]}}</span>-->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" class="py-0 px-2" @click="godist(scope.row)">
              <i class="fa fa-edit"></i>
            </el-button>
            <el-tooltip effect="dark" content="查看档案" placement="bottom">
              <el-button type="text" @click="goInfo(scope.row)" class="py-0 px-1">
                <i class="fa fa-search"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="query-pagination" v-show="!showImportBtn">
        <el-pagination
          @current-change="getData"
          :current-page.sync="params.index"
          :page-size="params.size"
          layout="total, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
      <el-table border :data="oneIndustryTableData" v-show="showImportBtn">
        <el-table-column label="借款人/担保客户" prop="customer_name"></el-table-column>
        <el-table-column label="客户类型" prop="org_class_name"></el-table-column>
        <el-table-column label="主营业务" prop="main_budiness"></el-table-column>
        <el-table-column label="联系电话" prop="corp_phone"></el-table-column>
        <el-table-column label="放款日/拟担保起始日">
          <template slot-scope="scope">
            <span>{{ $utils.dateFormat(scope.row.load_date, 'yyyy-MM-dd') || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到期日">
          <template slot-scope="scope">
            <span>{{ $utils.dateFormat(scope.row.load_end_date, 'yyyy-MM-dd') || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="贷款期限" prop="warranty_period"></el-table-column>
        <el-table-column label="审批金额（万元）" align="right">
          <template slot-scope="scope">
            <span>{{ scope.row.warranty_amount }}</span>
          </template>
        </el-table-column>

        <el-table-column label="审批状态">已通过</el-table-column>
      </el-table>
      <div class="query-pagination" v-show="showImportBtn">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page.sync="params.index"
          :page-size="params.size"
          :total="oneIndustryTotalCount"
          @current-change="getOneIndustry"
        ></el-pagination>
      </div>
    </loading-wrap>

    <el-dialog
      title="角色分配"
      top="110px"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
      :visible.sync="distVisible"
      class="drag"
    >
      <el-form ref="form" label-width="100px" :model="form" :rules="rules">
        <p class="font-weight-bold">任务审核</p>
        <el-form-item label="审核状态：" prop="task_status">
          <el-radio-group v-model="form.task_status">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <p class="font-weight-bold">角色分配</p>
        <el-form-item label="A角：">
          <select-staff v-model="form.res_a" el-class=""></select-staff>
        </el-form-item>
        <el-form-item label="B角：">
          <select-staff v-model="form.res_b" el-class=""></select-staff>
        </el-form-item>
        <el-form-item>
          <el-button @click="submit()" type="primary" class="btn-long">保存</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible.sync="reportView"
      :close-on-click-modal="false"
      :before-close="closeReportView"
      width="80%"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="信用档案" name="first">
          <credit-file
            :view-mode="true"
            v-if="reportView"
            :related-id="customerRelatedId"
          ></credit-file>
        </el-tab-pane>
        <el-tab-pane label="附件" name="second">
          <attach-list :data-list="dataList"></attach-list>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import { enumFarmType, enumTaskStatus } from '@/credit/plugins/enum'
import SelectStaff from '@/components/select/SelectStaff'
import CreditFile from '@/credit/components/creditFile/Index'
import AttachList from './AttachList'
import { ONE_INDUSTRY_LOAD_PRODUCT } from '@/credit/plugins/constant'

import { arrayFromString } from '@vimi/utils-tool'

export default {
  components: {
    AttachList,
    SelectStaff,
    CreditFile,
  },
  props: {},
  data() {
    return {
      enumFarmType,
      enumTaskStatus,
      // 一县一业产业贷
      showImportBtn: false,
      oneIndustryTotalCount: 0,
      oneIndustryTableData: [],

      enumStatusType: {
        0: 'danger',
        1: 'success',
      },
      params: {
        index: 1,
        size: 10,
        customer_name: '',
        'is_approval.eq': 1,
      },
      totalCount: 0,
      tableData: [],
      distVisible: false,
      form: { task_status: '' },
      rules: {
        task_status: [{ required: true, message: '请选择A角', trigger: 'change' }],
      },
      file: 0,
      reportView: false,
      loading: false,
      userId: '',
      PutId: '',
      activeName: 'first',
      dataList: [],
      status: '',
      customerRelatedId: '',
    }
  },
  computed: {},
  watch: {
    $route(route) {
      if (route.name === 'taskDist') {
        this.status = this.$route.query.status
        this.params['task_status.eq'] = this.status
        this.showImportBtn = false
        this.getData()
        this.getOneIndustry()
      }
    },
  },
  created() {
    this.status = this.$route.query.status
    this.params['task_status.eq'] = this.status
    this.userId = this.$store.getters.user.userId
    this.params['service_id.eq'] = this.$store.getters.org.clientId
    // this.showImportBtn = false
    this.getData()
    this.getOneIndustry()
  },
  mounted() {},
  methods: {
    closeReportView() {
      this.reportView = false
      this.getData()
    },
    goInfo(data) {
      sessionStorage.setItem('customer_related_id', data.customer_related_id)
      sessionStorage.setItem('customer_related_view', JSON.stringify(data))
      sessionStorage.setItem('credit_task_router', 'prelim')
      this.getAttachment()
      this.file++
      this.customerRelatedId = data.customer_related_id
      this.reportView = true
    },
    getAttachment() {
      this.dataList = []
      this.$api
        .getData(
          'credit',
          'datum_customer_attachment',
          {
            'customer_related_id.eq': sessionStorage.getItem('customer_related_id'),
          },
          { create_time: 'desc' }
        )
        .then(res => {
          if (!res || !res.data) {
            return
          }
          for (let p of res.data) {
            const images = arrayFromString(p.attachment)
            this.dataList.push({
              src: images,
              time: this.$utils.dateFormat(p.create_time, 'yyyy.MM.dd'),
              name: p.attachment_type,
            })
          }
        })
    },
    getData() {
      const params = { ...this.params }
      const status = this.$route.query.status
      if (status !== undefined) {
        params['task_status.eq'] = status
      }
      params['submit_type.eq'] = '2'
      params['loan_product_id.neq'] = ONE_INDUSTRY_LOAD_PRODUCT
      let job = this.$store.getters.user.job
      if (
        job !== 'org_credit_super' &&
        job !== 'org_c_manage' &&
        job !== 'org_r_emp' &&
        job !== 'org_r_manage' &&
        job !== 'org_corp'
      ) {
        params['pre_approval_person.eq'] = this.userId
        if (status === 1 || status === 2) {
          params['approval_person.eq'] = this.userId
        }
      }
      this.$api
        .getData('credit', 'customer_related_view', params, {
          create_time: 'desc',
        })
        .then(res => {
          const data = res.data.data || []
          this.tableData = data.map(item => {
            item.taskStatus = enumTaskStatus[item.task_status]
            item.distType = this.enumStatusType[item.task_status] || 'info'
            return item
          })
          this.totalCount = res.data.totalCount
        })
    },
    getOneIndustry() {
      this.params.has_ele_fee = ''
      this.$api
        .getData('credit', 'datum_one_county_industry', this.params, {
          load_date: 'desc',
        })
        .then(res => {
          this.oneIndustryTableData = (res && res.data && res.data.data) || []
          this.oneIndustryTotalCount = (res && res.data && res.data.totalCount) || 0
        })
    },
    getOneIndustryView() {
      this.showImportBtn = !this.showImportBtn
      this.getOneIndustry()
    },

    godist(row) {
      this.distVisible = true
      this.PutId = row.id
      if (row.task_status) {
        this.form.task_status = row.task_status
      } else {
        this.form.task_status = ''
      }
      this.form.res_a = row.res_a
      this.form.res_b = row.res_b
    },
    handleClose() {
      this.distVisible = false
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.res_a === this.form.res_b && this.form.res_a) {
            this.$message.error('不能选择同一个人，请重新选择!')
          } else {
            this.postRole()
          }
        } else {
          this.$message.error('输入错误，请重新选择!')
        }
      })
    },
    postRole() {
      let id = this.PutId
      this.form.approval_person = this.userId
      this.$api
        .updateData('credit', 'customer_related', id, this.form)
        .then(() => {
          this.getData()
          this.$message.success('分配成功！')
          this.$store.dispatch('getTaskCount')
          this.handleClose()
        })
        .catch(() => {
          this.$message.error('分配失败，请重试！')
        })
    },
  },
}
</script>
<style scoped></style>
